<template>
    <div ref="containerRef" class="screen-right">
        <component
            :is="item.component"
            v-for="item in components"
            :key="item.name"
            class="screen-right-item"
            :name="item.name"
        >
            <Right1 />
        </component>
    </div>
</template>

<script setup lang="ts">
    import { shallowRef } from 'vue';
    import { useSortable } from '@/hooks/useSortable';

    import Right1 from './right1.vue';
    import Right2 from './right2.vue';
    import Right3 from './right3.vue';

    const components = shallowRef([
        { name: 'right1', component: Right1 },
        { name: 'right2', component: Right2 },
        { name: 'right3', component: Right3 },
    ]);

    const { containerRef } = useSortable(components);
</script>

<style lang="less">
    .screen-right {
        width: 100%;
        height: 100%;

        .screen-right-item {
            width: 100%;
            height: 30%;
            // background-color: var(--es-block-bg);
            padding: 0;
            animation-name: slide;

            & + & {
                margin-top: 20px;
            }
        }
    }
</style>
